
Color Doc
Package Name
fifthtry.github.io/color-doc
Color Doc is a color schemes which can be used to change color scheme of web packages via using FTD lang.
To use color-doc color scheme on your web package, add below into FASTN.ftd file:
null
-- fastn.dependency: fifthtry.github.io/color-doc as colors
-- fastn.dependency: fifthtry.github.io/color-doc as colors
Import colors into FASTN/config.ftd file.
null
-- import: colors
-- import: colors
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Figma tokens json (old format)
Color scheme json
null
{ "default-colors light": { "Accent Colors": { "$fpm": { "color": { "accent": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } } } } }, "Background Colors": { "$fpm": { "color": { "main": { "background": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } } } } } }, "CTA Danger Colors": { "$fpm": { "color": { "main": { "cta-danger": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } } } } } }, "CTA Primary Colors": { "$fpm": { "color": { "cta-primary": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } } } } }, "CTA Secondary Color": { "$fpm": { "color": { "cta-secondary": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } }, "CTA Tertiary Colors": { "$fpm": { "color": { "main": { "cta-tertiary": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } } }, "Custom Colors": { "$fpm": { "color": { "main": { "custom": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } } } } } }, "Error Colors": { "$fpm": { "color": { "main": { "error": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } } } } } }, "Info Colors": { "$fpm": { "color": { "main": { "info": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } } } } } }, "Standalone Colors": { "$fpm": { "color": { "main": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } } } } }, "Success Colors": { "$fpm": { "color": { "main": { "success": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } } } } } }, "Warning Colors": { "$fpm": { "color": { "main": { "warning": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } } } } }, "default-colors dark": { "Accent Colors": { "$fpm": { "color": { "accent": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } } } } }, "Background Colors": { "$fpm": { "color": { "main": { "background": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } } } } } }, "CTA Danger Colors": { "$fpm": { "color": { "main": { "cta-danger": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } } } } } }, "CTA Primary Colors": { "$fpm": { "color": { "cta-primary": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } } } } }, "CTA Secondary Color": { "$fpm": { "color": { "cta-secondary": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } }, "CTA Tertiary Colors": { "$fpm": { "color": { "main": { "cta-tertiary": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } } }, "Custom Colors": { "$fpm": { "color": { "main": { "custom": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } } } } } }, "Error Colors": { "$fpm": { "color": { "main": { "error": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } } } } } }, "Info Colors": { "$fpm": { "color": { "main": { "info": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } } } } } }, "Standalone Colors": { "$fpm": { "color": { "main": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } } } } }, "Success Colors": { "$fpm": { "color": { "main": { "success": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } } } } } }, "Warning Colors": { "$fpm": { "color": { "main": { "warning": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } } } } } }
{ "default-colors light": { "Accent Colors": { "$fpm": { "color": { "accent": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } } } } }, "Background Colors": { "$fpm": { "color": { "main": { "background": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } } } } } }, "CTA Danger Colors": { "$fpm": { "color": { "main": { "cta-danger": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } } } } } }, "CTA Primary Colors": { "$fpm": { "color": { "cta-primary": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } } } } }, "CTA Secondary Color": { "$fpm": { "color": { "cta-secondary": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } }, "CTA Tertiary Colors": { "$fpm": { "color": { "main": { "cta-tertiary": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } } }, "Custom Colors": { "$fpm": { "color": { "main": { "custom": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } } } } } }, "Error Colors": { "$fpm": { "color": { "main": { "error": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } } } } } }, "Info Colors": { "$fpm": { "color": { "main": { "info": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } } } } } }, "Standalone Colors": { "$fpm": { "color": { "main": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } } } } }, "Success Colors": { "$fpm": { "color": { "main": { "success": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } } } } } }, "Warning Colors": { "$fpm": { "color": { "main": { "warning": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } } } } }, "default-colors dark": { "Accent Colors": { "$fpm": { "color": { "accent": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } } } } }, "Background Colors": { "$fpm": { "color": { "main": { "background": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } } } } } }, "CTA Danger Colors": { "$fpm": { "color": { "main": { "cta-danger": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } } } } } }, "CTA Primary Colors": { "$fpm": { "color": { "cta-primary": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } } } } }, "CTA Secondary Color": { "$fpm": { "color": { "cta-secondary": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } }, "CTA Tertiary Colors": { "$fpm": { "color": { "main": { "cta-tertiary": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } } } } } }, "Custom Colors": { "$fpm": { "color": { "main": { "custom": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } } } } } }, "Error Colors": { "$fpm": { "color": { "main": { "error": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } } } } } }, "Info Colors": { "$fpm": { "color": { "main": { "info": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } } } } } }, "Standalone Colors": { "$fpm": { "color": { "main": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } } } } }, "Success Colors": { "$fpm": { "color": { "main": { "success": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } } } } } }, "Warning Colors": { "$fpm": { "color": { "main": { "warning": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } } } } } }
Figma tokens json (new)
Figma tokens json (new format)
null
{ "default-colors-light": { "Accent Colors": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } }, "Info Colors": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } }, "Warning Colors": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } }, "default-colors-dark": { "Accent Colors": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } }, "Info Colors": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } }, "Warning Colors": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } }
{ "default-colors-light": { "Accent Colors": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } }, "Info Colors": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } }, "Warning Colors": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } }, "default-colors-dark": { "Accent Colors": { "primary": { "value": "#2dd4bf", "type": "color" }, "secondary": { "value": "#4fb2df", "type": "color" }, "tertiary": { "value": "#c5cbd7", "type": "color" } }, "Background Colors": { "base": { "value": "#18181b", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#141414", "type": "color" }, "step-2": { "value": "#585656", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#1c1b1f", "type": "color" }, "border": { "value": "#1c1b1f", "type": "color" }, "disabled": { "value": "#1c1b1f", "type": "color" }, "focused": { "value": "#1c1b1f", "type": "color" }, "hover": { "value": "#1c1b1f", "type": "color" }, "pressed": { "value": "#1c1b1f", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#2dd4bf", "type": "color" }, "border": { "value": "#2b8074", "type": "color" }, "disabled": { "value": "rgba(44, 201, 181, 0.1)", "type": "color" }, "focused": { "value": "#2cbfac", "type": "color" }, "hover": { "value": "#2c9f90", "type": "color" }, "pressed": { "value": "#2cc9b5", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#4fb2df", "type": "color" }, "border": { "value": "#209fdb", "type": "color" }, "disabled": { "value": "rgba(79, 178, 223, 0.1)", "type": "color" }, "focused": { "value": "#4fb1df", "type": "color" }, "hover": { "value": "#40afe1", "type": "color" }, "pressed": { "value": "#4fb2df", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#556375", "type": "color" }, "border": { "value": "#e2e4e7", "type": "color" }, "disabled": { "value": "rgba(85, 99, 117, 0.1)", "type": "color" }, "focused": { "value": "#e0e2e6", "type": "color" }, "hover": { "value": "#c7cbd1", "type": "color" }, "pressed": { "value": "#3b4047", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f5bdbb", "type": "color" }, "border": { "value": "#df2b2b", "type": "color" }, "text": { "value": "#c62a21", "type": "color" } }, "Info Colors": { "base": { "value": "#c4edfd", "type": "color" }, "border": { "value": "#205694", "type": "color" }, "text": { "value": "#205694", "type": "color" } }, "Standalone Colors": { "border": { "value": "#434547", "type": "color" }, "border-strong": { "value": "#919192", "type": "color" }, "scrim": { "value": "#007f9b", "type": "color" }, "shadow": { "value": "#007f9b", "type": "color" }, "text": { "value": "#a8a29e", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#e3f0c4", "type": "color" }, "border": { "value": "#3d741f", "type": "color" }, "text": { "value": "#467b28", "type": "color" } }, "Warning Colors": { "base": { "value": "#fbefba", "type": "color" }, "border": { "value": "#966220", "type": "color" }, "text": { "value": "#966220", "type": "color" } } } }
Stand Alone Colors
Below are standalone color definitions we use.
.border
.border strong
.text
.text strong
.shadow
.scrim
$inherited.colors.custom.one
dark:
#434547
light:
#434547
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#434547
light:
#434547
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#919192
light:
#919192
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#919192
light:
#919192
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#a8a29e
light:
#a8a29e
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#a8a29e
light:
#a8a29e
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#007f9b
light:
#007f9b
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#007f9b
light:
#007f9b
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#007f9b
light:
#007f9b
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#007f9b
light:
#007f9b
we use
$inherited.colors.custom.six
for
custom six
Background Colors
Below are background color definitions we use.
.base
.step-1
.step-2
.overlay
.code
$inherited.colors.custom.one
dark:
#18181b
light:
#18181b
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#18181b
light:
#18181b
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#141414
light:
#141414
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#141414
light:
#141414
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#585656
light:
#585656
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#585656
light:
#585656
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
rgba(0, 0, 0, 0.8)
light:
rgba(0, 0, 0, 0.8)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
rgba(0, 0, 0, 0.8)
light:
rgba(0, 0, 0, 0.8)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#2B303B
light:
#2B303B
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#2B303B
light:
#2B303B
we use
$inherited.colors.custom.five
for
custom five
CTA Primary Colors
Below are cta primary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#2dd4bf
light:
#2dd4bf
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#2dd4bf
light:
#2dd4bf
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#2c9f90
light:
#2c9f90
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#2c9f90
light:
#2c9f90
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#2cc9b5
light:
#2cc9b5
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#2cc9b5
light:
#2cc9b5
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
rgba(44, 201, 181, 0.1)
light:
rgba(44, 201, 181, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
rgba(44, 201, 181, 0.1)
light:
rgba(44, 201, 181, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#2cbfac
light:
#2cbfac
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#2cbfac
light:
#2cbfac
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#2b8074
light:
#2b8074
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#2b8074
light:
#2b8074
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#feffff
light:
#feffff
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#feffff
light:
#feffff
we use
$inherited.colors.custom.seven
for
custom seven
CTA Secondary Colors
Below are cta secondary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#40afe1
light:
#40afe1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#40afe1
light:
#40afe1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
rgba(79, 178, 223, 0.1)
light:
rgba(79, 178, 223, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
rgba(79, 178, 223, 0.1)
light:
rgba(79, 178, 223, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#4fb1df
light:
#4fb1df
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#4fb1df
light:
#4fb1df
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#209fdb
light:
#209fdb
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#209fdb
light:
#209fdb
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
CTA Tertiary Colors
Below are cta tertiary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#556375
light:
#556375
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#556375
light:
#556375
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#c7cbd1
light:
#c7cbd1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#c7cbd1
light:
#c7cbd1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#3b4047
light:
#3b4047
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#3b4047
light:
#3b4047
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
rgba(85, 99, 117, 0.1)
light:
rgba(85, 99, 117, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
rgba(85, 99, 117, 0.1)
light:
rgba(85, 99, 117, 0.1)
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#e0e2e6
light:
#e0e2e6
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#e0e2e6
light:
#e0e2e6
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#e2e4e7
light:
#e2e4e7
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#e2e4e7
light:
#e2e4e7
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#ffffff
light:
#ffffff
we use
$inherited.colors.custom.seven
for
custom seven
CTA Danger Colors
Below are cta danger color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.seven
for
custom seven
Accent Colors
Below are accent color definitions we use.
.primary
.secondary
.tertiary
$inherited.colors.custom.one
dark:
#2dd4bf
light:
#2dd4bf
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#2dd4bf
light:
#2dd4bf
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#c5cbd7
light:
#c5cbd7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#c5cbd7
light:
#c5cbd7
we use
$inherited.colors.custom.three
for
custom three
Error Colors
Below are error colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#f5bdbb
light:
#f5bdbb
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#f5bdbb
light:
#f5bdbb
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#c62a21
light:
#c62a21
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#c62a21
light:
#c62a21
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#df2b2b
light:
#df2b2b
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#df2b2b
light:
#df2b2b
we use
$inherited.colors.custom.three
for
custom three
Success Colors
Below are success colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#e3f0c4
light:
#e3f0c4
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#e3f0c4
light:
#e3f0c4
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#467b28
light:
#467b28
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#467b28
light:
#467b28
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#3d741f
light:
#3d741f
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#3d741f
light:
#3d741f
we use
$inherited.colors.custom.three
for
custom three
Info Colors
Below are info colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#c4edfd
light:
#c4edfd
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#c4edfd
light:
#c4edfd
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#205694
light:
#205694
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#205694
light:
#205694
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#205694
light:
#205694
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#205694
light:
#205694
we use
$inherited.colors.custom.three
for
custom three
Warning Colors
Below are warning color definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#fbefba
light:
#fbefba
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#fbefba
light:
#fbefba
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#966220
light:
#966220
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#966220
light:
#966220
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#966220
light:
#966220
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#966220
light:
#966220
we use
$inherited.colors.custom.three
for
custom three
Custom Colors
Below are custom color definitions we use.
.one
.two
.three
.four
.five
.six
.seven
.eight
.nine
.ten
$inherited.colors.custom.one
dark:
#ed753a
light:
#ed753a
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#ed753a
light:
#ed753a
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#f3db5f
light:
#f3db5f
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#f3db5f
light:
#f3db5f
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#8fdcf8
light:
#8fdcf8
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#8fdcf8
light:
#8fdcf8
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#7a65c7
light:
#7a65c7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#7a65c7
light:
#7a65c7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#eb57be
light:
#eb57be
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#eb57be
light:
#eb57be
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#ef8dd6
light:
#ef8dd6
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#ef8dd6
light:
#ef8dd6
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#7564be
light:
#7564be
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#7564be
light:
#7564be
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.eight
dark:
#d554b3
light:
#d554b3
we use
$inherited.colors.custom.eight
for
custom eight
$inherited.colors.custom.eight
dark:
#d554b3
light:
#d554b3
we use
$inherited.colors.custom.eight
for
custom eight
$inherited.colors.custom.nine
dark:
#ec8943
light:
#ec8943
we use
$inherited.colors.custom.nine
for
custom nine
$inherited.colors.custom.nine
dark:
#ec8943
light:
#ec8943
we use
$inherited.colors.custom.nine
for
custom nine
$inherited.colors.custom.ten
dark:
#da7a4a
light:
#da7a4a
we use
$inherited.colors.custom.ten
for
custom ten
$inherited.colors.custom.ten
dark:
#da7a4a
light:
#da7a4a
we use
$inherited.colors.custom.ten
for
custom ten